<script setup>
import { v4 as uuid } from 'uuid'
import { ref } from 'vue'

const inheritAttrs = ref(false)
const props = defineProps({
    id: {
        type: String,
        default() {
            return `text-input-${uuid()}`
        },
    },
    type: {
        type: String,
        default: 'text',
    },
    error: String,
    label: String,
})

const model = defineModel({ type: String })
const input = ref(null)

function focus() {
    input.focus()
}

function select() {
    input.select()
}

function setSelectionRange(start, end) {
    input.setSelectionRange(start, end)
}

</script>

<template>
    <div>
        <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
        <input :id="id" ref="input" class="form-input" :class="{ error: error }" :type="type" :value="model" v-model="model" />
        <div v-if="error" class="form-error">{{ error }}</div>
    </div>

</template>